<template>
  <div class="control">
    <div class="cen">
      <h2>这是节点控制界面</h2>
      风扇状态：<button @click="changeone">{{inner1}}</button><br>
      水泵状态：<button @click="changetwo">{{inner2}}</button><br>
      补光状态：<button @click="changethree">{{inner3}}</button><br>


    </div>
  </div>
</template>

<script>
  // 1.导入axios
  // import axios from 'axios'

  export default {
    name: 'Con-Trol',
    data() {
      return {
        fan: 0,
        beng: 0,
        led: 0,
        inner1: '关闭',
        inner2: '关闭',
        inner3: '关闭',
      }
    },
    methods: {
      changeone() {
        if (this.inner1 == '关闭') {
          this.inner1 = '开启'
          this.fan = 1
        } else {
          this.inner1 = '关闭'
          this.fan = 0
        }
        console.log(Date.now())
        this.$bus.$emit('event', { fan: this.fan, motor: this.beng, led: this.led })
      },
      changetwo() {
        if (this.inner2 == '关闭') {
          this.inner2 = '开启'
          this.beng = 1
        } else {
          this.inner2 = '关闭'
          this.beng = 0
        }
        this.$bus.$emit('event', { fan: this.fan, motor: this.beng, led: this.led })
      },
      changethree() {
        if (this.inner3 == '关闭') {
          this.inner3 = '开启'
          this.led = 1
        } else {
          this.inner3 = '关闭'
          this.led = 0
        }
        this.$bus.$emit('event', { fan: this.fan, motor: this.beng, led: this.led })
      }

    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h2 {
    margin: 0;
    padding: 0;
  }

  button {
    display: inline-block;
    width: 60px;
    height: 30px;
    border-radius: 20px;
    border: .5px solid #c6c6c6;
  }

  button:hover {
    box-shadow: 0 0 10px#fff;
  }

  .cen {
    width: 500px;
    height: 300px;
    background-color: #ffffff85;
    margin: 100px auto;
    text-align: center;
    line-height: 70px;
    font-size: 20px;
  }
</style>